<template>
  <div class="space-y-6">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between">
      <div>
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">仪表盘</h2>
        <p class="mt-1 text-sm text-gray-500">欢迎回来，{{ username }}</p>
      </div>
      <div class="mt-4 md:mt-0">
        <button class="inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom" @click="refreshData">
          <i class="fa fa-refresh mr-2"></i>
          <span>刷新数据</span>
        </button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      <StatCard
        v-for="stat in statistics"
        :key="stat.title"
        v-bind="stat"
      />
    </div>

    <!-- 图表区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div class="bg-white rounded-xl shadow-custom p-6 lg:col-span-2">
        <div class="flex items-center justify-between mb-6">
          <h3 class="text-lg font-semibold text-gray-800">数据趋势</h3>
          <div class="flex space-x-2">
            <button 
              v-for="period in ['周', '月', '年']" 
              :key="period"
              class="px-3 py-1 text-xs font-medium rounded-md transition-custom"
              :class="selectedPeriod === period ? 'bg-primary text-white' : 'text-gray-600 hover:bg-gray-100'"
              @click="selectedPeriod = period"
            >
              {{ period }}
            </button>
          </div>
        </div>
        <div class="h-80">
          <TrendChart :data="trendData" />
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-custom p-6">
        <div class="flex items-center justify-between mb-6">
          <h3 class="text-lg font-semibold text-gray-800">数据分布</h3>
          <button class="text-gray-400 hover:text-gray-600 transition-custom">
            <i class="fa fa-ellipsis-v"></i>
          </button>
        </div>
        <div class="h-80">
          <DistributionChart :data="distributionData" />
        </div>
      </div>
    </div>

    <!-- 最近活动和待办事项 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <RecentPlants :plants="recentPlants" />
      <RecentUpdates :updates="recentUpdates" />
      <TodoList :todos="todos" @add="addTodo" @toggle="toggleTodo" />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import StatCard from '@/components/dashboard/StatCard.vue'
import TrendChart from '@/components/dashboard/TrendChart.vue'
import DistributionChart from '@/components/dashboard/DistributionChart.vue'
import RecentPlants from '@/components/dashboard/RecentPlants.vue'
import RecentUpdates from '@/components/dashboard/RecentUpdates.vue'
import TodoList from '@/components/dashboard/TodoList.vue'

export default {
  name: 'DashboardView',
  components: {
    StatCard,
    TrendChart,
    DistributionChart,
    RecentPlants,
    RecentUpdates,
    TodoList
  },
  data() {
    return {
      selectedPeriod: '周',
      statistics: [
        {
          title: '植物总数',
          value: this.$store.state.statistics.plantCount,
          icon: 'fa-seedling',
          color: 'primary',
          change: 12,
          trend: 'up'
        },
        {
          title: '成分总数',
          value: this.$store.state.statistics.componentCount,
          icon: 'fa-flask',
          color: 'secondary',
          change: 8,
          trend: 'up'
        },
        {
          title: '成果总数',
          value: this.$store.state.statistics.achievementCount,
          icon: 'fa-trophy',
          color: 'accent',
          change: 15,
          trend: 'up'
        },
        {
          title: '本月访问量',
          value: this.$store.state.statistics.visitCount,
          icon: 'fa-eye',
          color: 'warning',
          change: 3,
          trend: 'down'
        }
      ],
      recentPlants: [
        {
          id: 1,
          name: '银杏',
          scientificName: 'Ginkgo biloba',
          image: 'https://picsum.photos/200/200?random=1',
          date: '2023-06-15'
        },
        // ... 其他最近添加的植物
      ],
      recentUpdates: [
        {
          id: 1,
          type: 'plant',
          title: '更新了银杏的成分信息',
          user: '李明',
          time: '2小时前',
          icon: 'fa-seedling',
          color: 'primary'
        },
        // ... 其他最近更新
      ],
      todos: [
        {
          id: 1,
          text: '整理最新的植物研究数据',
          completed: false
        },
        // ... 其他待办事项
      ]
    }
  },
  computed: {
    ...mapState({
      user: state => state.user
    }),
    username() {
      return this.user ? this.user.username : '管理员'
    },
    trendData() {
      // 根据 selectedPeriod 返回相应的趋势数据
      return []
    },
    distributionData() {
      // 返回分布数据
      return []
    }
  },
  methods: {
    ...mapActions(['fetchStatistics']),
    async refreshData() {
      try {
        await this.fetchStatistics()
        // 更新其他数据
      } catch (error) {
        console.error('刷新数据失败:', error)
      }
    },
    addTodo(text) {
      this.todos.push({
        id: Date.now(),
        text,
        completed: false
      })
    },
    toggleTodo(id) {
      const todo = this.todos.find(t => t.id === id)
      if (todo) {
        todo.completed = !todo.completed
      }
    }
  },
  async created() {
    await this.refreshData()
  }
}
</script> 